<template>
  <div class="one-box">
    <div id="customerChart1"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, watch } from "vue"
import { getCurrentInstance } from "vue" //访问内部组件实例
import useStore from "../../store/index.js"
const { one } = useStore()
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties
onMounted(() => {
  nextTick(() => {
    initEcharts()
  })
  initOnList()
})
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(
    document.getElementById("customerChart1")
  )
  if (myChart == null) {
    // 如果不存在，就进行初始化
    myChart = $echarts.init(document.getElementById("customerChart1"))
  }
  let option = {
    backgroundColor: "#0c2d55",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "rgb(126,199,255)"
        }
      }
    },
    // legend: {
    //     show: true,
    //     top: '10%',
    //     itemWidth: 30, // 图例标记的图形宽度。
    //     //   itemGap: 20, // 图例每项之间的间隔。
    //     itemHeight: 10, //  图例标记的图形高度。
    //     textStyle: {
    //         color: '#fff',
    //         fontSize: 14,
    //         padding: [0, 8, 0, 8]
    //     }
    // },
    color: ["#ff7022", "#fff58a", "#46f8ff"],
    legend: [
      {
        data: [
          {
            name: "1",
            icon: "rect"
          }
        ],
        itemWidth: 30,
        itemHeight: 4,
        top: "6%",
        left: "35%",
        textStyle: {
          color: "#fff",
          // fontWeight: "normal",
          fontSize: 20
        }
      },
      {
        data: [
          {
            name: "2",
            icon: "rect"
          }
        ],
        itemWidth: 30,
        itemHeight: 4,
        top: "6%",
        left: "50%",
        textStyle: {
          color: "#fff",
          // fontWeight: "normal",
          fontSize: 20
        }
      },
      {
        top: "5.5%",
        left: "65%",
        textStyle: {
          color: "#fff",
          fontSize: 20,
          fontFamily: "微软雅黑"
        },
        itemWidth: 20,
        itemHeight: 20,
        data: [
          {
            name: "3",
            icon: "rect"
          }
        ]
      }
    ],
    grid: {
      top: "30%",
      left: "10%",
      right: "5%",
      bottom: "20%"
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: "rgb(41,188,245)"
          }
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          formatter: function (value) {
            var str = ""
            var num = 4 //每行显示字数
            var valLength = value.length //该项x轴字数
            var rowNum = Math.ceil(valLength / num) // 行数

            if (rowNum > 1) {
              for (var i = 0; i < rowNum; i++) {
                var temp = ""
                var start = i * num
                var end = start + num

                temp = value.substring(start, end) + "\n"
                str += temp
              }
              return str
            } else {
              return value
            }
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: 22
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#233653"
          }
        },
        axisTick: {
          show: false
        },
        data: NameList.value
      }
    ],
    yAxis: [
      {
        name: "d",
        nameTextStyle: {
          color: "#fff",
          fontSize: 24,
          padding: [0, 0, 0, 0]
        },
        // minInterval: 1,
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#1160a0",
            type: "dashed"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#008de7"
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 22
          }
        },
        axisTick: {
          show: false
        }
      },
      {
        name: "%",
        nameTextStyle: {
          color: "#fff",
          fontSize: 24,
          padding: [0, 0, 0, 0]
        },
        // minInterval: 1,
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#1160a0",
            type: "dashed"
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#008de7"
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 22
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "1",
        type: "line",
        symbol: "none", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        yAxisIndex: 1,
        lineStyle: {
          normal: {
            width: 3,
            color: "#ff7022" // 线条颜色
          }
        },
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: $echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#ff702230"
                },
                {
                  offset: 0.6,
                  color: "#ff702220"
                },
                {
                  offset: 1,
                  color: "#ff702210"
                }
              ],
              false
            )
          }
        },
        data: AgeList.value
      },
      {
        name: "2",
        type: "line",
        symbol: "none", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        lineStyle: {
          normal: {
            width: 3,
            color: "#fff58a" // 线条颜色
          }
        },
        yAxisIndex: 1,
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: $echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#fff58a30"
                },
                {
                  offset: 0.6,
                  color: "#fff58a20"
                },
                {
                  offset: 1,
                  color: "#fff58a10"
                }
              ],
              false
            )
          }
        },
        data: AgeList.value
      },
      {
        name: "3",
        type: "bar",
        barWidth: 20,
        barGap: "40%",
        data: AgeList.value,
        itemStyle: {},
        color: $echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#44f4fb"
          },
          {
            offset: 1,
            color: "#44f4fb30"
          }
        ])
      }
    ]
  }
  myChart.setOption(option)
}
const OnList = ref([
  {
    name: "张三",
    age: 3
  },
  {
    name: "李四",
    age: 4
  },
  {
    name: "王五",
    age: 5
  },
  {
    name: "赵六",
    age: 6
  }
])
const NameList = ref([])
const AgeList = ref([])
const initOnList = () => {
  OnList.value.forEach((item) => {
    NameList.value.push(item.name)
    AgeList.value.push(item.age)
  })
  console.log(NameList.value)
  console.log(AgeList.value)
}

watch(
  () => one.shijian,
  (newValue, oldValue) => {
    console.log(OnList.value)
    one.axiostwoOnList()
    OnList.value = one.twoOnList
    console.log(OnList.value)
    NameList.value = []
    AgeList.value = []
    initOnList()
    console.log(NameList.value)
    console.log(AgeList.value)
    initEcharts()
  }
)
</script>
<style scoped lang="less">
.one-box {
  width: 100%;
  height: 100%;
  background-color: pink;
  #customerChart1 {
    width: 100%;
    height: 100%;
  }
}
</style>
